<template>
  <!-- 基本信息卡片：用 el-card 包裹，恢复卡片样式 -->
  <el-card class="basic-info-card" shadow="hover">
    <h3 class="section-title">基本信息</h3>
    <div class="info-wrapper">
      <!-- 左右信息列容器 -->
      <div class="info-columns-container">
        <!-- 左侧信息列 -->
        <div class="info-column left">
          <div class="info-item">
            <span class="label">老人姓名：</span>
            <span class="value">{{ basicData.elderName || '玛多吉' }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ basicData.sex === 'female' ? '女' : '男' || '女' }}</span>
          </div>
          <div class="info-item">
            <span class="label">床位号：</span>
            <span class="value">{{ basicData.bedNumber || '101-1' }}</span>
          </div>
        </div>

        <!-- 右侧信息列 -->
        <div class="info-column right">
          <div class="info-item">
            <span class="label">护理等级：</span>
            <span class="value">{{ basicData.nursingLevel || '三级护理等级' }}</span>
          </div>
          <div class="info-item">
            <span class="label">年龄：</span>
            <span class="value">{{ basicData.age || '124' }}</span>
          </div>
          <div class="info-item">
            <span class="label">护理员姓名：</span>
            <span class="value">{{ basicData.nursingStaffName || '护理员' }}</span>
          </div>
        </div>
      </div>

      <!-- 头像 -->
      <div class="avatar-box">
        <el-image
          :src="basicData.avatar || defaultAvatar"
          :preview-src-list="[basicData.avatar || defaultAvatar]"
          :preview-options="{ center: true }"
          fit="cover"
          class="avatar"
        />
      </div>
    </div>
  </el-card>

  <!-- 护理项目卡片：用 el-card 包裹 -->
  <el-card class="nursing-project-card" shadow="hover" >
    <h3 class="section-title">护理项目</h3>
    <div class="info-wrapper">
      <div class="info-column left">
        <div class="info-item">
          <span class="label">护理项目名称：</span>
          <span class="value">{{ projectData.projectName }}</span>
        </div>
        <div class="info-item">
          <span class="label">执行状态：</span>
          <span class="value">
            {{
              projectData.status === 1
                ? '待执行'
                : projectData.status === 2
                ? '已执行'
                : '已取消'
            }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">创建人：</span>
          <span class="value">
            {{ projectData.taskType === 2 ? '系统' : projectData.creator }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">期望服务时间：</span>
          <span class="value">{{ projectData.estimatedServerTime }}</span>
        </div>
      </div>

      <div class="info-column right">
        <div class="info-item">
          <span class="label">关联单据：</span>
          <span class="value">{{ projectData.relNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">项目类型：</span>
          <span class="value">
            {{ projectData.taskType === 2 ? '护理计划内' : '护理计划外' }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ projectData.createTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">备注信息：</span>
          <span class="value">{{ projectData.remark || '--' }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
defineProps({
  basicData: {
    type: Object,
    default: () => ({
      elderName: '白玛多吉',
      sex: 'female',
      bedNumber: '101-1',
      nursingLevel: '三级护理等级',
      age: '124',
      nursingStaffName: '护理员',
      avatar: 'https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/61032c27-43eb-49cc-86df-ba8cbeb2c27d.png'
    })
  },
  projectData: {
    type: Object,
    default: () => ({
      projectName: '心理咨询',
      relNo: 'ZD202310161729431',
      status: 1,
      taskType: 2,
      creator: '',
      createTime: '2023-10-16 04:29:43',
      estimatedServerTime: '2023-10-15 19:00:00',
      remark: '--'
    })
  }
})

// 新增：无头像时的默认占位图（增强鲁棒性）
const defaultAvatar = 'https://via.placeholder.com/90';
</script>

<style scoped>
/* 通用：标题、信息项布局、标签/值对齐 */
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}

.info-wrapper {
  display: flex;
  align-items: flex-start;   /* 信息项顶部对齐 */
  justify-content: space-between; /* 「信息列容器」与「头像」两端分布 */
  padding: 0 16px;
}

/* 关键：左右信息列的容器（内部先完成对齐） */
.info-columns-container {
  display: flex;
  width: calc(100% - 120px); /* 给头像预留 90px 宽度 + 30px 间距 */
  justify-content: space-between; /* 左、右列在容器内分散对齐 */
}

.info-column {
  display: flex;
  flex-direction: column;
  width: 48%; /* 左右列各占容器的 ~48%，预留间距 */
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  align-items: center; /* 标签与值垂直居中 */
}

.label {
  width: 140px; /* 统一标签宽度，确保横向对齐 */
  color: #606266;
  white-space: nowrap; /* 强制标签不换行 */
}

.value {
  color: #303133;
  white-space: nowrap; /* 强制值不换行 */
}

/* 基本信息卡片：利用 el-card 自带样式，补充间距 */
.basic-info-card {
  margin-bottom: 0; /* 与下方卡片间距 */
}

/* 头像布局 */
.avatar-box {
  width: 90px;
  height: 90px;
  align-self: flex-start; /* 与信息列顶部对齐 */
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}


</style>